<template>
  <div id="doc-icon-list">
    <bf-tabs v-model="activeTab">
      <bf-tabContent
        v-for="tabItem in tabsList"
        :label="tabItem.label"
        :c-key="tabItem.key"
        :key="tabItem.key"
      >
        <div class="icon-content-list">
          <div
            class="doc-icon"
            v-for="(item, index) in tabItem.allList"
            :key="index"
            @click="copyIconCode(item)"
          >
            <bf-icon :name="item" size="26"></bf-icon>
            <p>{{item}}</p>
          </div>
        </div>
        共 {{tabItem.allList.length}} 个 图标
      </bf-tabContent>
    </bf-tabs>
  </div>
</template>

<script>
export default {
  name: "iconList",
  data() {
    return {
      commonPrefix: "b-icon",
      activeTab: "3",
      search: "",
      tabsList: [
        {
          label: "媒体",
          key: "1",
          allList: [
            "speakerSimpleNone",
            "speakerHigh",
            "speakerSimpleX",
            "speakerLow",
            "speakerX",
            "speakerSimpleHigh",
            "speakerSlash",
            "speakerNone",
            "speakerSimpleSlash",
            "speakerSimpleLow",
            "stopCircle",
            "stop",
            "videoCamera",
            "videoCameraSlash",
            "camera",
            "cameraSlash",
            "airplay",
            "cornersIn",
            "cornersOut",
            "aperture",
            "closedCaptioning",
            "imageSquare",
            "image",
            "musicNote",
            "musicNoteSimple",
          ],
        },
        { label: "人物", key: "2", allList: [] },
        {
          label: "箭头",
          key: "3",
          allList: [
            "squareLeft",
            "lineUpRight",
            "sCounterClockwise",
            "squareDownRight",
            "sOutLineHorizontal",
            "squareDown",
            "sInCardinal",
            "squareIn",
            "sOutSimple",
            "sOutLineVertical",
            "squareDownLeft",
            "sOutCardinal",
            "sOut",
            "sIn",
            "sLeftRight",
            "sInSimple",
            "sInLineHorizontal",
            "sDownUp",
            "sInLineVertical",
            "lineRight",
            "sClockwise",
            "lineDownLeft",
            "listDashes",
            "lineLeft",
            "right",
            "lineUp",
            "lineUpLeft",
            "funnelSimple",
            "lineDownRight",
            "fatLineUp",
            "fatRight",
            "fatLinesLeft",
            "lineDown",
            "left",
            "fatLineLeft",
            "floppyDisk",
            "fatDown",
            "fatUp",
            "elbowUpLeft",
            "fatLinesRight",
            "fatLineDown",
            "fatLinesDown",
            "fatLeft",
            "fatLineRight",
            "elbowUpRight",
            "circleUpRight",
            "downLeft",
            "elbowLeft",
            "circleUpLeft",
            "circleLeft",
            "elbowRightDown",
            "elbowRightUp",
            "down",
            "elbowDownLeft",
            "elbowLeftUp",
            "downRight",
            "elbowRight",
            "fastForwardCircle",
            "repeat",
            "bendDownLeft",
            "uRightDown",
            "caretCircleRight",
            "rewindCircle",
            "bendRightDown",
            "shuffleAngular",
            "caretDoubleUp",
            "caretDoubleRight",
            "skipBackCircle",
            "caretCircleUp",
            "skipBack",
            "caretDoubleLeft",
            "caretDoubleDown",
            "skipForward",
            "circleDownRight",
            "caretLeft",
            "caretCircleDown",
            "caretCircleLeft",
            "caretRight",
            "circleDown",
            "caretCircleDoubleUp",
            "caretDown",
            "caretUp",
            "circleUp",
            "circleDownLeft",
            "elbowLeftDown",
            "circleRight",
            "elbowDownRight",
          ],
        },
        { label: "安全/警告", key: "4", allList: [] },
        {
          label: "设计/品牌(1)",
          key: "5",
          allList: [
            "framerLogo",
            "figmaLogo",
            "discordLogo",
            "dribbbleLogo",
            "instagramLogo",
            "linkedinLogo",
            "sketchLogo",
            "mediumLogo",
            "redditLogo",
            "nyTimesLogo",
            "phosphorLogo",
            "spotifyLogo",
            "pinterestLogo",
            "twitchLogo",
            "telegramLogo",
            "snapchatLogo",
            "facebookLogo",
            "androidLogo",
            "googleLogo",
            "googlePlayLogo",
          ],
        },
        {
          label: "出行/自然(1)",
          key: "6",
          allList: [
            "navigationArrow",
            "airplaneLanding",
            "airplaneTakeoff",
            "anchor",
            "anchorSimple",
            "trainRegional",
            "bicycle",
            "crosshairSimple",
            "crosshair",
            "train",
            "trainSimple",
            "carSimple",
            "car",
            "jeep",
            "truck",
            "bus",
            "trafficSign",
            "flagBanner",
            "flag",
            "compass",
            "house",
            "houseSimple",
            "door",
            "suitcaseSimple",
            "suitcase",
            "globeHemisphereEast",
            "globeStand",
            "globeSimple",
            "globeHemisphereWest",
            "globe",
            "houseLine",
            "mapPin",
            "mapPinLine",
            "toggleRight",
            "path",
            "mapTrifold",
            "sunDim",
            "sun",
            "snowflake",
            "sunHorizon",
            "star",
            "wind",
            "umbrella",
            "leaf",
            "atom",
            "moon",
            "umbrellaSimple",
            "rainbow",
            "drop",
            "fireSimple",
            "pawPrint",
            "rainbowCloud",
            "flame",
            "fire",
            "moonStars",
            "planet",
          ],
        },
        { label: "沟通", key: "7", allList: [] },
        { label: "办公", key: "8", allList: [] },
        { label: "商业", key: "9", allList: [] },
        { label: "设备", key: "10", allList: [] },
      ],
      allList: [
        "circleHalfTilt",
        "cloudArrowDown",
        "highlighterCircle",
        "desktopTower",
        "crop",
        "deviceTablet",
        "eyeClosed",
        "deviceTabletCamera",
        "gridFour",
        "deviceMobile",
        "markerCircle",
        "desktop",
        "scissors",
        "deviceMobileCamera",
        "circleHalf",
        "close",
        "alignCenterVertical",
        "cloudArrowUp",
        "circlesThree",
        "checks",
        "alignRight",
        "computerTower",
        "circlesFour",
        "batteryFull",
        "alignBottom",
        "checkSquareOffset",
        "squaresFour",
        "cellSignalSlash",
        "alignTop",
        "check",
        "circlesThreePlus",
        "checkCircle",
        "rows",
        "cellSignalNone",
        "square",
        "checkSquare",
        "columns",
        "cellSignalX",
        "squareHalf",
        "cellSignalMedium",
        "triangle",
        "cellSignalHigh",
        "text",
        "cellSignalLow",
        "alignCenterHorizontal",
        "bluetoothSlash",
        "stack",
        "bluetoothX",
        "stackSimple",
        "lockSimpleOpen",
        "receipt",
        "circleWavyWarning",
        "package",
        "lockLaminatedOpen",
        "money",
        "lockKey",
        "lamp",
        "circleWavyCheck",
        "forkKnife",
        "prohibit",
        "handbagSimple",
        "lockOpen",
        "martini",
        "lockSimple",
        "handbag",
        "lockKeyOpen",
        "currencyRub",
        "lockLaminated",
        "currencyInr",
        "circleWavy",
        "currencyJpy",
        "info",
        "currencyDollarSimple",
        "lock",
        "currencyKrw",
        "circleWavyQuestion",
        "currencyCny",
        "warningOctagon",
        "currencyDollar",
        "shieldSlash",
        "currencyGbp",
        "warningCircle",
        "currencyEur",
        "warning",
        "buildings",
        "wall",
        "toteSimple",
        "shieldWarning",
        "currencyBtc",
        "shieldCheck",
        "currencyCircleDollar",
        "shield",
        "barcode",
        "prohibitInset",
        "coffee",
        "shieldChevron",
        "coin",
        "question",
        "cardholder",
        "userMinus",
        "tote",
        "userPlus",
        "creditCard",
        "userSquare",
        "bagSimple",
        "wheelchair",
        "ticket",
        "users",
        "storefront",
        "userRectangle",
        "framerLogo",
        "userCircleMinus",
        "googlePlayLogo",
        "userCirclePlus",
        "figmaLogo",
        "userGear",
        "googleLogo",
        "smileyWink",
        "discordLogo",
        "user",
        "dribbbleLogo",
        "userCircle",
        "androidLogo",
        "smileySad",
        "facebookLogo",
        "smileyMeh",
        "snapchatLogo",
        "smileyNervous",
        "telegramLogo",
        "smileySticker",
        "twitchLogo",
        "handPointing",
        "pinterestLogo",
        "smiley",
        "spotifyLogo",
        "smileyBlank",
        "phosphorLogo",
        "handWaving",
        "nyTimesLogo",
        "handPalm",
        "redditLogo",
        "identificationCard",
        "mediumLogo",
        "handGrabbing",
        "sketchLogo",
        "hand",
        "linkedinLogo",
        "sortDescending",
        "instagramLogo",
        "sortAscending",
        "squareLeft",
        "pushPinSlash",
        "lineUpRight",
        "pushPinSimple",
        "sCounterClockwise",
        "projectorScreen",
        "squareDownRight",
        "projectorScreenChart",
        "sOutLineHorizontal",
        "pushPinSimpleSlash",
        "squareDown",
        "notePencil",
        "sInCardinal",
        "printer",
        "squareIn",
        "noteBlank",
        "sOutSimple",
        "listNumbers",
        "sOutLineVertical",
        "notebook",
        "squareDownLeft",
        "folderSimple",
        "sOutCardinal",
        "presentationChart",
        "sOut",
        "paperclip",
        "sIn",
        "listBullets",
        "sLeftRight",
        "presentation",
        "sInSimple",
        "folderOpen",
        "sInLineHorizontal",
        "folders",
        "sDownUp",
        "note",
        "sInLineVertical",
        "paperclipHorizontal",
        "lineRight",
        "folderNotchPlus",
        "sClockwise",
        "notepad",
        "fatLinesUp",
        "listPlus",
        "lineDownLeft",
        "listDashes",
        "lineLeft",
        "folderSimplePlus",
        "right",
        "funnel",
        "lineUp",
        "folderSimpleMinus",
        "lineUpLeft",
        "funnelSimple",
        "lineDownRight",
        "list",
        "fatLineUp",
        "fileX",
        "fatRight",
        "folderNotchOpen",
        "fatLinesLeft",
        "fileText-1",
        "lineDown",
        "folderNotch",
        "left",
        "folderNotchMinus",
        "fatLineLeft",
        "floppyDisk",
        "fatDown",
        "fileMinus",
        "fatUp",
        "fileText",
        "elbowUpLeft",
        "filePlus",
        "fatLinesRight",
        "fileSearch",
        "fatLineDown",
        "clipboardText",
        "fatLinesDown",
        "fileArrowUp",
        "fatLeft",
        "fileArrowDown",
        "fatLineRight",
        "copySimple",
        "elbowUpRight",
        "copy",
        "circleUpRight",
        "briefcase",
        "downLeft",
        "archiveTray",
        "elbowLeft",
        "clipboard",
        "circleUpLeft",
        "briefcaseMetal",
        "circleLeft",
        "cards",
        "elbowRightDown",
        "tray",
        "elbowRightUp",
        "trashSimple",
        "down",
        "archive",
        "elbowDownLeft",
        "archiveBox",
        "elbowLeftUp",
        "textStrikethrough",
        "downRight",
        "textUnderline",
        "elbowRight",
        "textT",

        "flashlight",
        "hexagon",
        "dotsThreeCircleVertical",
        "dropHalf",
        "downloadSimple",
        "pencilLine",
        "frameCorners",
        "pencil",
        "hardDrive",
        "rectangle",
        "gauge",
        "penNibStraight",
        "hardDrives",
        "paintBucket",
        "paint",
        "laptop",
        "pencilSimple",
        "lightning",
        "lightningSlash",
        "batteryWarning",
        "eyeSlash",
        "suitcaseSimple",
        "link",
        "train",
        "linkSimpleHorizontal",
        "trainSimple",
        "linkBreak",
        "airplaneLanding",
        "linkSimpleHorizontalBreak",
        "truck",
        "magnifyingGlassMinus",
        "trafficSign",
        "magnifyingGlass",
        "airplaneInFlight",
        "keyboard",
        "suitcase",
        "monitor",
        "airplaneTakeoff",
        "magnifyingGlassPlus",
        "anchor",
        "mouse",
        "trainRegional",
        "minusCircle",
        "bicycle",
        "linkSimpleBreak",
        "carSimple",
        "monitorPlay",
        "car",
        "plusCircle",
        "anchorSimple",
        "plus",
        "bus",
        "linkSimple",
        "flagBanner",
        "flag",
        "power",
        "crosshairSimple",
        "qrCode",
        "crosshair",
        "signIn",
        "compass",
        "toggleLeft",
        "simCard",
        "house",
        "signOut",
        "globeHemisphereEast",
        "spinnerGap",
        "globeStand",
        "spinner",
        "globeSimple",
        "vibrate",
        "globeHemisphereWest",
        "uploadSimple",
        "houseSimple",
        "wifiLow",
        "globe",
        "nut",
        "houseLine",
        "wifiHigh",
        "mapPin",
        "upload",
        "mapPinLine",
        "loading",
        "jeep",
        "mouseSimple",
        "door",
        "toggleRight",
        "path",
        "sunDim",
        "mapTrifold",
        "sun",
        "navigationArrow",
        "snowflake",
        "speakerSimpleNone",
        "sunHorizon",
        "speakerSimpleX",
        "star",
        "videoCamera",
        "wind",
        "speakerSimpleSlash",
        "umbrella",
        "stop",
        "leaf",
        "stopCircle",
        "atom",
        "speakerX",
        "moon",
        "speakerSlash",
        "umbrellaSimple",
        "videoCameraSlash",
        "rainbow",
        "airplay",
        "drop",
        "camera",
        "fireSimple",
        "cameraSlash",
        "pawPrint",
        "aperture",
        "rainbowCloud",
        "cornersIn",
        "flame",
        "centered",
        "cornersOut",
        "fire",
        "text",
        "closedCaptioning",
        "moonStars",
        "dots",
        "eject",
        "planet",
        "s",
        "copyright",
        "centeredDots",
        "disc",
        "centeredText",
        "gif",
        "sTeardrop",
        "faders",
        "teardropDots",
        "fadersHorizontal",
        "teardrop",
        "fastForwardCircle",
        "teardropText",
        "headset",
        "quotes",
        "headphones",
        "sticker",
        "a-mediameiti",
        "share",
        "imageSquare",
        "rssSimple",
        "image",
        "thumbsUp",
        "musicNote",
        "asterisk",
        "musicNotesSimple",
        "shareNetwork",
        "a-chatgoutong",
        "newspaper",
        "huati",
        "microphoneSlash",
        "rss",
        "musicNoteSimple",
        "share-1",
        "newspaperClipping",
        "voicemail",
        "pauseCircle",
        "translate",
        "pictureInPicture",
        "thumbsDown",
        "play",
        "broadcast",
        "pause",
        "peace",
        "record",
        "hashStraight",
        "repeat",
        "megaphoneSimple",
        "medium",
        "hash",
        "nyTimes",
        "phoneSlash",
        "playCircle",
        "bendDownLeft",
        "screencast",
        "uRightDown",
        "shuffle",
        "caretCircleRight",
        "rewindCircle",
        "bendRightDown",
        "shuffleAngular",
        "caretDoubleUp",
        "repeatOnce",
        "caretDoubleRight",
        "skipBackCircle",
        "caretCircleUp",
        "skipBack",
        "caretDoubleLeft",
        "shuffleSimple",
        "caretDoubleDown",
        "skipForward",
        "circleDownRight",
        "slidersHorizontal",
        "caretLeft",
        "sliders",
        "caretCircleDown",
        "skipForwardCircle",
        "caretCircleLeft",
        "speakerSimpleLow",
        "caretRight",
        "speakerNone",
        "circleDown",
        "speakerSimpleHigh",
        "caretCircleDoubleUp",
        "speakerLow",
        "caretDown",
        "speakerHigh",
        "caretUp",
        "textAlignLeft",
        "circleUp",
        "textAlignCenter",
        "circleDownLeft",
        "textAlignJustify",
        "elbowLeftDown",
        "textAlignRight",
        "circleRight",
        "textBolder",
        "elbowDownRight",
        "textItalic",
        "counterClockwise",
        "trash",
        "clockwise",
      ],
      list: [],
    };
  },
  mounted() {
    this.handleSearch();
  },
  methods: {
    handleSearch() {
      if (this.search) {
        this.list = this.allList.filter((item) => {
          return item.includes(this.search);
        });
      } else {
        this.list = this.allList;
      }
    },
    copyIconCode(item) {
      const codeText = `<bf-icon name="${item}" />`;
      this.$copyText(codeText).then(
        () => {
          this.$message.success("copy success~");
        },
        () => {
          this.$message.error("copy error!");
        }
      );
    },
  },
};
</script>

<style lang='scss'>
@import "./iconStyle.scss";
</style>
